<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="div1"></div>
  <!-- 先引入核心库 -->
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <!-- 然后引入dom操作 -->
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- JSX -->
  <script src="http://static.runoob.com/assets/react/browser.min.js"></script>
  <script type="text/babel">
  // 在JSX中，遇到`<`就会当做html解析，遇到`{`,就会当做js
    let info = 'Jack'
    let isTrue = true
    function fn1 () {
      return 100
    }
    // JSX中创建节点更加简单、直观
    let node1 = <h1>
        <span>666</span>
        <div>{1+1}</div>
        <div>{info}</div>
        <div>{isTrue?'真的':'假的'}</div>
        <div>{fn1 ()}</div>
      </h1>;
    let div1 = document.getElementById('div1');
    // 虚拟DOM不是真实的DOM，而是js对象
    console.log(typeof node1);
    ReactDOM.render(node1, div1)
  </script>
</body>
</html>